<template>
  <view class="definite">
    <u-navbar :is-back="true" :custom-back="BackM" :title="orderDic.navTitle" back-text="">
    </u-navbar>
    <view class="top-bar">
      <view class="top-content">· {{orderDic.status}} ·</view>
    </view>
    <view class="top">
      <u-icon name="map" color="#02CB86" class="map" size="50"></u-icon>
      <view class="item">
        <span class="name">{{orderDic.value.address.name}}</span>
        <span class="tele">{{orderDic.value.address.phone}}</span>
      </view>
      <view class="address">
        {{orderDic.value.address.address}}
      </view>
    </view>
    <view class="item-content" v-for="(item,index) in orderDic.value.orderDetailsList" :key="index">
      <view class="image">
        <image :src="item.posType.image" alt="" />
      </view>
      <view class="description">{{item.posType.modelsName}}</view>
      <view>
        <span class="money">¥ {{item.price}}</span>
        <span class="num">× {{item.num}}</span>
      </view>
    </view>
    <view class="item-one">
      <view style="line-height: 1.6rem">
        <span>商品总价</span>
        <span style="float: right">¥ {{allMoney(orderDic.value)}}</span>
      </view>
      <view style="line-height: 1.6rem">
        <span>运费金额</span>
        <span style="float: right">¥{{orderDic.value.postage}}</span>
      </view>
      <view style="line-height: 1.6rem">
        <span>红包抵扣</span>
        <span style="float: right">-¥{{orderDic.value.couponAmount}}</span>
      </view>
    </view>
    <view class="item-two">
      <span class="em">实付金额</span>
      <span class="en">¥ {{orderDic.value.money}}</span>
    </view>
    <view class="item-three">
      <view class="sort">
        <span class="one">订单编号：</span>
        <span class="two">{{orderDic.value.orderNo}}</span>
      </view>
      <view class="sort">
        <span class="one">支付方式：</span>
        <span class="two">{{payMoneyType(orderDic.value.payType)}}</span>
      </view>
      <view class="sort">
        <span class="one">创建时间：</span>
        <span class="two">{{orderDic.value.createTime}}</span>
      </view>
      <view class="sort">
        <span class="one">付款时间：</span>
        <span class="two">{{orderDic.value.payTime}}</span>
      </view>
    </view>
	<view v-if="orderDic.btnOne.show&&orderDic.btnTwo.show" style="position: absolute;bottom: 0;width: 100%;display: flex;flex-direction: row;">
		<button class="button" style="background: #555555;" @click="clickBtn(orderDic.value,orderDic.btnTwo.name)">{{orderDic.btnTwo.name}}</button>
		<button class="button" style="background: #02af74;" @click="clickBtn(orderDic.value,orderDic.btnOne.name)">{{orderDic.btnOne.name}}</button>
	</view>
	<button v-if="orderDic.btnOne.show&&!orderDic.btnTwo.show" class="buttonAll" @click="clickBtn(orderDic.value,orderDic.btnOne.name)">{{orderDic.btnOne.name}}</button>
    <button v-if="!orderDic.btnOne.show&&orderDic.btnTwo.show" class="buttonAll" @click="clickBtn(orderDic.value,orderDic.btnTwo.name)">{{orderDic.btnTwo.name}}</button>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { cancelOrder } from "../../../utils/uniApi";
import { orderConfirmReceipt } from "../../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public orderDic:any={};//订单详情

  created() {}
  
  onLoad(value:any){
  	let dic:any = JSON.parse(decodeURIComponent(value.order))
	this.orderDic = dic;
	if(this.orderDic.status == '等待付款'){
		this.orderDic.navTitle = '待付款'
	}else if(this.orderDic.status == '交易成功'){
		this.orderDic.navTitle = '交易成功'
	}else if(this.orderDic.status == '等待发货'){
		this.orderDic.navTitle = '待发货'
	}else if(this.orderDic.status == '等待收货'){
		this.orderDic.navTitle = '待收货'
	}
  	console.log('父组件传递的参数:'+JSON.stringify(dic))   //
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }
  onHide(){
  	  uni.hideLoading();
  }
  
  //计算商品总价
  allMoney(value:any){
	  var all = 0
	  if(value.orderDetailsList.length>0){
		  for(var i=0;i<value.orderDetailsList.length;i++){
			  var item = value.orderDetailsList[i]
			  all = all + item.num*item.price
		  }
	  }
	  return all
  }
  //支付方式
  payMoneyType(type:any){
	  if(parseInt(type) == 0){
		  return '积分'
	  }else if(parseInt(type) == 1){
		  return '余额'
	  }else if(parseInt(type) == 2){
		  return '支付宝'
	  }
  }
  
  clickBtn(item:any,name:any){
  	  if(name == '再次购买'){
		  uni.navigateTo({
		    url: '../../buy/buy'
		  });
		  // var allMoney: any = 0.0;
		  // for (let entry of item.orderDetailsList) {
		  //   allMoney = allMoney + entry.num * entry.price;
		  // }
		  // let goodsDic = { list: item.orderDetailsList, all: allMoney.toFixed(2) };
		  // uni.navigateTo({
		  //   url:"../../order/sureOrder?goods=" + encodeURIComponent(JSON.stringify(goodsDic)),
		  // });
  	  }else if(name == '查看物流'){
		  uni.navigateTo({
		     url: '../express/index?order='+ encodeURIComponent(JSON.stringify(this.orderDic)),
		  });
  	  }else if(name == '提醒发货'){
  	  		  uni.showToast({
  	  			title: '提醒发货成功',
  	  			icon: 'none',
  	  			duration: 2000
  	  		  });
  	  }else if(name == '确认收货'){
  	  		  this.orderConfirmReceipt(item.id)
  	  }else if(name == '取消付款'){
  	  		  this.cancelOrder(item.id)
  	  }
  }
  
  //取消付款
  cancelOrder(orderId:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		orderId:orderId,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  cancelOrder(params).then((res: any) => {
  	    console.log('++++++++++++++++++++订单 取消付款：' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '取消付款成功',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  			  setTimeout(()=>{
				  this.BackM();
  			  },1000)
  	      }else{
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '取消付款失败',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  	      }
  	  });
  }
  
  //确认收货
  orderConfirmReceipt(orderId:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		orderId:orderId,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  orderConfirmReceipt(params).then((res: any) => {
  	    console.log('++++++++++++++++++++订单 确认收货：' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '确认收货成功',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  			  setTimeout(()=>{
				  this.BackM();
			  },1000)
  	      }else{
  			  uni.hideLoading();
  			  uni.showToast({
  			  	title: '确认收货失败',
  			  	icon: 'none',
  			  	duration: 2000
  			  });
  	      }
  	  });
  }
  
  //返回按钮
   BackM(){
  		uni.navigateBack({
  		   delta: 1,
  		});
   }
}
</script>

<style  lang="scss"  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.top-bar {
  height: 2.75rem;
  background: #02af74;
  box-shadow: 0rem 0rem 0rem 0rem rgba(204, 204, 204, 0.35);
}
.top-content {
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 2.75rem;
}
.top {
  padding: 0.7rem 0.3rem;
  margin-bottom: 0.2rem;
  background: #ffffff;
}
.map {
  float: left;
  height: 3rem;
  width: 1.7rem;
}
.item {
  padding-bottom: 0.3rem;
}
.name {
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 1.06rem;
}
.tele {
  padding-left: 1rem;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 1.06rem;
}
.address {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 0.81rem;
}
.item-content {
  padding: 0.4rem;
  height: 3.6rem;
  background: #ffffff;
  font-family: PingFang SC;
  margin-bottom: 0.03rem;
  border-bottom: 0.03rem #e5e5e5 solid;
}
.image {
  float: left;
}
.image image {
  width: 3.6rem;
  height: 3.6rem;
}
.description {
  float: left;
  font-size: 0.7rem;
  padding-left: 0.4rem;
  width: 13.63rem;
  height: 2.5rem;
  font-size: 0.79rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #101010;
  line-height: 0.98rem;
}
.money {
  float: left;
  font-size: 0.75rem;
  padding-left: 0.4rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #101010;
}
.num {
  float: right;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}
.item-one {
  padding: 0.1rem 0.4rem;
  background: #ffffff;
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 1.06rem;
  margin-bottom: 0.15rem;
}
.item-two {
  background: #ffffff;
  padding: 0.5rem 0.4rem;
  margin-bottom: 0.15rem;
}
.em,
.en {
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.06rem;
}
.em {
  font-size: 0.65rem;
  color: #333333;
}
.en {
  float: right;
  font-size: 0.7rem;
  color: #ff0612;
}
.item-three {
  height: 10.97rem;
  background: #ffffff;
  padding: 0.4rem 0.6rem;
}
.sort {
  line-height: 1.6rem;
}
.one,
.two {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 1.06rem;
}
.one {
  color: #666666;
}
.two {
  color: #000000;
  padding-left: 1rem;
}
.button {
  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 2.5rem;
  height: 2.5rem;
  width: 50%;
  // padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttonAll {
  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 2.5rem;
  height: 2.5rem;
  background: #02af74;
  bottom: 0;
}
</style>